{{extend "iview/layout1.html"}}

{{block title}}ping data{{end}}

{{block info_menu}}
{{end info_menu}}

{{block content}}
{{use "ui.echarts"}}
<card>
    <div style="min-height: 600px;">
        <h1>Ping data trend</h1>
        <Divider></Divider>
        <row>
            <i-col span="4">
                <date-picker type="daterange" :value="date_range_trend" @on-change="date_on_change_trend" :options="options_daterange_trend" :disabledDate="disable_date" placeholder="Select date range"></date-picker>
            </i-col>
        </row>
        <row>
            <i-col span="24">
                <div id="chart_trend" style="width: 100%;height:400px;"></div>
            </i-col>
        </row>

        <h1>Ping data by day</h1>
        <Divider></Divider>
        <row>
            <i-col span="4">
                <date-picker type="date" :value="date" @on-change="date_on_change" :disabledDate="disable_date" placeholder="Select date"></date-picker>
            </i-col>
            <i-col span="18">
                <i-select v-model="selected" multiple style="width:800px">
                    <i-option v-for="item in options" :value="item.value" :key="item.value">{ item.label }</i-option>
                </i-select>
            </i-col>
        </row>
        <row>
            <i-col span="24">
                <div id="chart" style="width: 100%;height:400px;"></div>
            </i-col>
        </row>
        <h1>Ping clients</h1>
        <Divider></Divider>
        <i-table :columns="tcolumns_clients" :data="tdata_clients"></itable>
    </div>
</card>
{{end content}}

{{block mainapp_vue}}
<script>
var vm = new Vue({
    el: '#mainapp',
    delimiters: ['{', '}'],
    data: function() {
        const get_range = function(range_secs){
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - range_secs);
            return [start, end];
        }
        const today = new Date()

        return {
            date_range_trend: get_range(3600 * 1000 * 24 * 7),
            options_daterange_trend: {
                shortcuts: [
                    {text: '1 week',value: function(){return get_range(3600 * 1000 * 24 * 7)}},
                    {text: '2 weeks',value: function(){return get_range(3600 * 1000 * 24 * 7 * 2)}},
                    {text: '1 month',value: function(){return get_range(3600 * 1000 * 24 * 31)}},
                    {text: '3 months',value: function(){return get_range(3600 * 1000 * 24 * 31 * 3)}}
                ]
            },
            chart_trend: null,
            chart_trend_option: {
                title: {
                    text:"max ping packet loss % in a day",
                    padding: 15
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    top: 40
                },
                grid: {
                    top: 100
                },
                dataset: {},
                xAxis: {type:"category"},
                yAxis: {max:100},
                series: [],
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ]
            },

            date: today,
            selected: [],
            options: [],
            chart: null,
            chart_option: {
                title: {text:"ping packet loss % every minute"},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    top: 30
                },
                grid: {
                    top: 90
                },
                dataset: {},
                xAxis: {type:"category"},
                yAxis: {max:100},
                series: [],
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ]
            },

            tcolumns_clients: [
                {title:'Ping source ip', key:'ip_from'},
                {title: 'Last time', key:'submit_datetime_str'}
            ],
            tdata_clients: []
        }
    },
    methods: {
        date_on_change_trend: function(data){
            this.date_range_trend = data
            this.show_trend()
        },
        show_trend: function(){
            const this_ = this
            this_.chart_trend.showLoading()
            $.ajax({
                type: "POST",
                url: "{{=url_for('pingdata.views.PingData.api_get_chart_data_trend')}}",
                data: {
                    date_range: JSON.stringify(this_.date_range_trend),
                },
                success: function (data) {
                    this_.chart_trend_option.series = data.series
                    this_.chart_trend_option.dataset.dimensions = data.dimensions
                    this_.chart_trend_option.dataset.source = data.source
                    this_.chart_trend.setOption(this_.chart_trend_option)
                    this_.chart_trend.hideLoading()
                }
            })

        },

        date_on_change: function(data){
            this.date = data
            this.update_options()
        },
        update_options: function(){
            const this_ = this
            this.chart.showLoading()
            $.ajax({
                type: "POST",
                url: "{{=url_for('pingdata.views.PingData.api_get_options')}}",
                data: {date: JSON.parse(JSON.stringify(this_.date))},
                success: function (data) {
                    if (Array.isArray(data)) {
                        this_.options = data
                        this_.selected = []
                        for (var i in data) {
                            this_.selected.push(data[i].value)
                        }
                        this_.show_pingdata()
                    }
                    else {
                        this_.options = []
                        this_.selected = []
                    }
                }
            })
        },
        show_pingdata: function(){
            var this_ = this
            $.ajax({
                type: "POST",
                url: "{{=url_for('pingdata.views.PingData.api_get_chart_data')}}",
                data: {
                    date: JSON.parse(JSON.stringify(this_.date)),
                    selected: JSON.stringify(this_.selected)
                },
                success: function (data) {
                    this_.chart_option.series = data.series
                    this_.chart_option.dataset.dimensions = data.dimensions
                    this_.chart_option.dataset.source = data.source
                    this_.chart.setOption(this_.chart_option)
                    this_.chart.hideLoading()
                    this_.tdata_clients = data.clients
                }
            })
        },
        disable_date: function(){
            return false
        }
    },
    mounted: function(){
        
        this.chart_trend = echarts.init(document.getElementById('chart_trend'));
        this.show_trend()
        const this_ = this
        this.chart_trend.on('click', function(params){
            this_.date = params.name
            this_.update_options()
        })

        this.chart = echarts.init(document.getElementById('chart'));
        this.update_options()
    }
})
</script>
{{end mainapp_vue}}
